.pane-group {
    @include box_flex(
        $width: 100%,
        $height: auto,
        $direction: column,
        $justify: flex-start,
        $align: flex-start
    );
    .list-group {
        @include box_flex(
            $width: 100%,
            $height: auto,
            $direction: row,
            $justify: flex-start,
            $align: flex-start
        );

        padding: 5px;
        > span {
            @include box_flex(
                $width: 100%,
                $height: auto,
                $direction: row,
                $justify: flex-start,
                $align: flex-start,
                $flex-wrap: wrap
            );
            .component-item {
                @include box_flex(
                    $width: calc((100% / 2) - 10px),
                    $height: auto,
                    $direction: row,
                    $justify: flex-start,
                    $align: center
                );

                margin: 5px;
                padding: 5px;
                font-size: $font-mini;
                border-radius: 4px;
                transition: all 0.3s;
                @include border_color($type: solid, $color: 'border-base');
                @include background_color($color: 'cover1');
                .label {
                    margin-left: 10px;
                }
                &:hover {
                    @include border_color($type: dashed, $color: 'primary');
                    @include font_color($color: 'primary');

                    cursor: move;
                }
            }
            .component-item.disabled {
                &:hover {
                    @include border_color($type: solid, $color: 'border-base');
                    @include background_color($color: 'cover1');
                    @include font_color($color: 'text-primary');

                    cursor: not-allowed;
                }
            }
        }
    }
}
